<template>
	<view>
		<u-search placeholder="请输入想要的商品" 
		 v-model="keyValue" 
		 @search="findByWord" 
		 @custom="findByWord"
		 @focus="openboard"
		 >
		 </u-search>
		 <u-keyboard mode="car" :show="seeable" @change="addvalue" @backspace="rmvalue" @cancel="closeboard" @confirm="closeboard"></u-keyboard>
		 
		<u-grid :border="true" col="2" >
			 <u-grid-item v-for="(goods) in searchGoods" @click="toDetail(goods.id)">
				 <image :src="goods.image" mode="widthFix" style="width: 80%;"></image>
				 <text class="grid-text">{{goods.name}}</text>
			 </u-grid-item>
		 </u-grid>
		 <u-empty v-if="searchGoods.length==0"
		         mode="search"
		         icon="http://cdn.uviewui.com/uview/empty/car.png"
		 >
		 </u-empty>
	</view>
	
</template>

<script>
	export default {
		data(){
			return{
				pageNum:1,
				pageSize:6,
				seeable:false,
				keyValue:'',
				searchGoods:[]
			}
		},
		methods:{
			findByWord(value){
				if(value){
					console.log("我要搜索啦",value);
					uni.request({
						url:"http://localhost:6061/goods/byName/"+value,
						header:{
							'Authorization':uni.getStorageSync("token")
						},
						success: (res) => {
							this.searchGoods = res.data.data;
						}
					})
				}else{
					this.searchGoods = []
				}
			},
			openboard(){
				this.seeable = true;
			},
			closeboard(){
				this.seeable = false;
			},
			addvalue(val){
				this.keyValue += val;
				console.log(this.keyValue);
			},
			rmvalue(val){
				if(this.keyValue.length) this.keyValue = this.keyValue.substr(0, this.keyValue.length - 1);
				console.log(this.keyValue);
			},
			toDetail(gid){
				console.log("商品详情",gid);
				//跳转到商品详情页面
				uni.navigateTo({
					url:"detail?id="+gid
				})
			}
		}
	}
</script>
	
<style>
	.grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 10rpx  40rpx ;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
			height: 17%;
	}
	.u-grid-item{
		height: 160px;
	}
</style>
